<!--
 * @Description: 使用 https://www.swiper.com.cn/demo/index.html#virtual-slides
 * API: https://www.swiper.com.cn/api/virtual/374.html
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-02-07 10:07:39
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-05-24 15:07:54
-->
<template>
  <div class="swiper-virtual boxSwipe">
    <div class="swiper-wrapper">
      <!-- 0:待解锁 1:已开箱 2:待开箱 -->
      <div
        class="swiper-slide box-swipe-item items-center"
        v-for="(Item, index) in boxList"
        :key="index"
      >
        <div class="box-swipe-item-box">
          <!-- 背景 -->
          <img
            class="box-swipe-item-bg"
            :class="{
              'box-swipe-item-bg-disabled': !(
                Item.boxStatus == 2 || Item.boxStatus == 0
              ),
            }"
            src="/image/airdrop/box-bg-icon.svg"
          />

          <!-- 光环 -->
          <img
            v-if="Item.boxStatus == 2 && !props.activityEnd"
            class="box-swipe-item-box-gh"
            src="/image/airdrop/box-opengh-green.svg"
          />
          <!-- 箱子 -->
          <img
            class="box-swipe-item-img"
            :style="{ opacity: Item.boxStatus == 1 ? 0.6 : 1 }"
            :src="icons[index]"
          />
          <!-- 锁 -->
          <img
            v-if="Item.boxType == 2 && Item.boxStatus == 0"
            class="box-swipe-item-box-suo"
            src="/image/airdrop/box-suo-icon.svg"
          />
          <!-- BDC -->
          <div
            v-if="Item.boxStatus == 1"
            class="box-swipe-item-bdc items-center"
          >
            <img class="box-swipe-item-bdc-icon" src="/image/bdc.svg" />
            <div class="box-swipe-item-bdc-text">{{ Item.sendAmount }}</div>
            <div class="box-swipe-item-bdc-bg" />
          </div>
        </div>
        <!-- 'box-swipe-item-btn-jhm': Item.boxType == 2 || Item.boxStatus == 1, -->
        <div
          v-if="!props.activityEnd"
          class="items-center"
          :class="{
            boxOpenbtn: Item.boxStatus == 2,
            'box-swipe-item-btn': Item.boxStatus != 2,
          }"
          @click.stop="openBox(Item)"
        >
          <div class="box-swipe-item-btn-text">
            {{
              Item.boxStatus == 1
                ? $t("airdrop.ylq")
                : Item.boxType == 2
                ? $t("airdrop.jhm")
                : "open"
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="boxSwipe">
import { onMounted, onUnmounted } from "vue";
import { openAirdropActivityBox } from "@/api/airdrop";
import { debounce, loadScript } from "@/utils";
import { showToast } from "vant";

const props = withDefaults(
  defineProps<{
    centerindex?: number;
    list: any;
    activityEnd: boolean;
  }>(),
  {
    centerindex: 0,
    list: [],
    activityEnd: false,
  }
);

const emit = defineEmits(["initDone", "change", "clickItem"]);

const { t } = useI18n();

let swiper: any = null;
const isScriptDone = ref(false);
const isOnMounted = ref(false);
const prefixImg = process.env.NODE_ENV != "development" ? "/fx" : "";
// 宝箱列表
const boxList = ref([]);
watch(
  () => props.list,
  (valNew) => {
    if (valNew) {
      boxList.value = valNew;
    }
  },
  {
    immediate: true,
  }
);
// 宝箱图片
const icons = ref([
  `${prefixImg}/image/airdrop/box.png`,
  `${prefixImg}/image/airdrop/box.png`,
  `${prefixImg}/image/airdrop/box1.png`,
  `${prefixImg}/image/airdrop/box.png`,
  `${prefixImg}/image/airdrop/box2.png`,
  `${prefixImg}/image/airdrop/box.png`,
  `${prefixImg}/image/airdrop/box3.png`,
]);

/**
 * @description: 手动加在script脚本,失败会重试 3 次
 */
loadScript("/file/swiper-bundle.min.js", () => {
  isScriptDone.value = true;
});

// 初始化Swiper
const initSwiper = () => {
  swiper = new Swiper(".boxSwipe", {
    slidesPerView: 3,
    spaceBetween: 10,
    speed: 300, // 切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
    on: {
      // Swiper Change 事件
      slideChange: function () {
        // console.log(" 改变了，activeIndex为");
        emit("change");
      },
      // 加载完成通知
      init: function (val: any) {
        emit("initDone", val);
      },
    },
  });
};

watch([isOnMounted, isScriptDone], (neweVal) => {
  if (neweVal[0] && neweVal[1] && !swiper) initSwiper();
});

/**
 * @description: 空投活动-开箱
 */
const openAirdropActivityBoxRequest = (val: any, call?: any) => {
  openAirdropActivityBox({
    boxId: val.boxId,
  })
    .then((res) => {
      if (res) {
        val.boxStatus = 1;
        emit("clickItem", val);
      }
    })
    .finally(() => {
      call && call();
    });
};

onMounted(() => {
  isOnMounted.value = true;
});

onUnmounted(() => {
  if (swiper) swiper.destroy(); // 移除
});
let isLxClick = false; // 是否连续点击
const openBox = debounce(
  (val: any) => {
    // console.log("--点击了宝箱--", val);
    if (val.boxStatus == 2) {
      if (val.boxType == 1) {
        if (isLxClick) {
          showToast(t("common.wlycqcxjr"));
        }
        openAirdropActivityBoxRequest(val, () => {
          isLxClick = false;
        });
        isLxClick = true;
      } else {
        emit("clickItem", val);
      }
    }
  },
  2000,
  false
);
</script>
<style lang="scss">
// @import url("./swiper-box.min.css");
@import url("../lottery/swiper-bundle.min.css");

.boxSwipe {
  width: 80.5vw;
  overflow: hidden;
  // left: 4vw;
  position: relative;
  .box-swipe {
    &-item {
      min-height: 138 * 2px !important;
      justify-content: center !important;
      display: flex !important;
      flex-direction: column;
      &-bdc {
        position: absolute;
        top: 38 * 2px;
        left: 10 * 2px;
        width: 79 * 2px;
        z-index: 9999;
        justify-content: center;
        &-icon {
          z-index: 19;
          width: 14 * 2px;
          height: 14 * 2px;
          margin-right: 2px;
          margin-left: 3px;
        }
        &-text {
          line-height: 24 * 2px;
          position: relative;
          z-index: 9;
          text-align: center;
          color: #007bff;
          font-size: 13 * 2px;
          font-weight: 590;
        }
        &-bg {
          position: absolute;
          top: -1px;
          left: -1px;
          width: 82 * 2px;
          height: 25 * 2px;
          background-color: #fff1a9;
          border-top: 0.5px solid #002853;
          border-bottom: 0.5px solid #002853;
        }
      }

      &-img {
        position: absolute;
        padding: 30px 30px;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 70 * 2px;
        height: 70 * 2px;
      }
      &-box {
        position: relative;
        &-gh {
          position: absolute;
          z-index: 3;
          top: 7%;
          left: 8px;
          width: 90%;
          @keyframes rotate {
            0% {
              transform: rotateZ(0);
            }
            100% {
              transform: rotateZ(720deg);
            }
          }
          animation: rotate 5s infinite linear;
        }
        &-suo {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          padding: 7 * 2px;
          z-index: 99999;
          border-radius: 100px;
          border: 3px solid #fff;

          // background: linear-gradient(180deg, rgba(255, 241, 169, 0.40) 0%, #FFF1A9 100%);
          backdrop-filter: blur(10px);
        }
      }
      &-bg {
        width: 100 * 2px;
        height: 100 * 2px;
        border-radius: 8.5 * 2px;
        background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
        &-disabled {
          background: #99caff !important;
        }
      }

      &-btn {
        margin-top: 10 * 2px;
        min-width: 97 * 2px;
        max-width: 97 * 2px;
        height: 30 * 2px;
        margin-bottom: 5px;
        // padding: 0 5 * 2px;
        border-radius: 100px;
        background: #b0d1f4;
        justify-content: center;
        &-text {
          width: 90%;
          margin-left: 5%;
          text-align: center;
          color: #fff;
          font-size: 13 * 2px;
          font-weight: 590;
        }
      }
    }
  }
}
.boxOpenbtn {
  margin-top: 10 * 2px;
  min-width: 97 * 2px;
  max-width: 97 * 2px;
  height: 30 * 2px;

  border-radius: 97px;

  background-image: url("/image/airdrop/button-bg.svg");
  background-size: 100%;
  background-repeat: no-repeat;

  div {
    font-size: 13 * 2px;
    font-weight: 590;
    text-align: center;
    color: #fff !important;
  }
}
</style>
